<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {pageSendAPI} from "@/apis/send.ts";
import {useInfoStore} from "@/store/user/user.ts";
import dayjs from "dayjs";


//分页查询岗位和企业信息
const count = 8;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
// const data = <any>reactive([]);
const list = <any>reactive([]);
//用户信息
const userStore = useInfoStore().userInfo;
const sendPageDate = <any>ref({
  searchName: "",
  sendEmployerId: userStore.userId,//招聘者id
  sendStatus: '已投递',//投递状态
  resumeGender: "",
  resumeEducationDegree: "",
  pageCurrent: pageCurrent.value,
  pageSize: count,
});

const getSendList = async (sendPageDate: any) => {
  const res = await pageSendAPI(sendPageDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getSendList(sendPageDate.value);
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getSendList(sendPageDate.value).then(() => {
    loading.value = false;
  });
};

//查看
const router = useRouter();
const goToJobAndResumeDetail = (sendId: string) => {
  router.push({
    name: 'jobAndResumeDetail',
    params: {
      sendId: sendId // 确保传递的参数为字符串类型
    }
  });
};

//搜索
const onSearch = () => {
  list.splice(0, list.length);
  getSendList(sendPageDate.value);
};
//筛选
const check = () => {
  list.splice(0, list.length);
  getSendList(sendPageDate.value);
}

</script>

<template>
  <div class="filter">
    <div class="top">
      <div style="display: flex;align-items: center;">

        <h4 style="margin-right: 10px;">
          搜索 :
        </h4>

        <div style="width: 50%; margin-right: 10px;">
          <a-input-search
              v-model:value="sendPageDate.searchName"
              allow-clear
              enter-button
              placeholder="搜索岗位名称/投递人姓名"
              @search="onSearch"
          />
        </div>


      </div>
      <div style="display: flex;align-items: center;margin-top: -20px">
        <h4 style="margin-right: 10px;">
          学历 :
        </h4>
        <a-radio-group v-model:value="sendPageDate.resumeEducationDegree" button-style="solid" @change="check">
          <a-radio-button value="">不限</a-radio-button>
          <a-radio-button value="大专">大专</a-radio-button>
          <a-radio-button value="本科">本科</a-radio-button>
          <a-radio-button value="硕士">硕士</a-radio-button>
          <a-radio-button value="博士">博士</a-radio-button>
        </a-radio-group>

        <h4 style="margin-left: 20px;margin-right: 10px">
          性别 :
        </h4>
        <a-radio-group v-model:value="sendPageDate.resumeGender" button-style="solid" @change="check">
          <a-radio-button value="">不限</a-radio-button>
          <a-radio-button value="男">男生</a-radio-button>
          <a-radio-button value="女">女生</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="bottom">
      <div class="main-title">
        <h4>筛 选 投 递</h4>
      </div>
      <div class="main-content">
        <a-list
            :data-source="list"
            :loading="initLoading"
            class="demo-loadmore-list"
            item-layout="horizontal"
        >
          <template #loadMore>
            <div
                v-if="!initLoading && !loading && list.length < pageTotal"
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-button @click="onLoadMore">获取更多</a-button>
            </div>
          </template>
          <template #renderItem="{ item }">

            <a-list-item>
              <template #actions>
                <a-button ghost type="primary" @click="goToJobAndResumeDetail(item.sendId)">查看</a-button>
              </template>
              <a-skeleton :loading="!!item.loading" :title="false" active avatar>
                <a-list-item-meta
                    :description="item.jobLocation+'&nbsp&nbsp&nbsp&nbsp'+item.jobType+'&nbsp&nbsp&nbsp&nbsp 投递时间: '+ dayjs(item.createTime).format('YYYY-MM-DD')"
                >
                  <template #title>
                    {{ item.resumeUsername + "---" + item.jobTitle }}
                  </template>
                  <template #avatar>
                    <a-avatar
                        :size="54"
                        :src="'http://localhost:8080/image/download?name=' + item.resumeAvatar"
                    />
                  </template>
                </a-list-item-meta>
                <a-badge-ribbon :text="item.resumeEducationSchool" color="blue">
                  <div style="border-radius: 10px;width: 180px;background-color: #EAF2FF;padding: 10px">
                    <div>
                      学历: {{ item.resumeEducationDegree }}
                    </div>
                    <div>
                      性别: {{ item.resumeGender }} &nbsp&nbsp&nbsp&nbsp 年龄: {{ item.resumeAge }}
                    </div>
                  </div>
                </a-badge-ribbon>
              </a-skeleton>
            </a-list-item>
          </template>
        </a-list>
      </div>


    </div>
  </div>

</template>

<style scoped>
.filter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 15%;
    padding-left: 30px;
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 85%;

    .main-title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .main-content {
      width: 100%;
      flex-grow: 1;
      height: 90%;
      overflow: auto; /* 内容超出时自动显示滚动条 */
    }
  }
}

</style>
